Listview with popup menu

  • Steps

    ListView.builder

    
                  
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatelessWidget {
      final List<String> _names = [
        'Liam', 'Noah', 'Oliver', 'William', 'Elijah', 
        'James', 'Benjamin', 'Lucas', 'Mason', 'Ethan', 'Alexander'
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Pop Menu with List'),
          ),
          body: ListView.builder(
            itemBuilder: (_, i) {
              String name = _names[i];
              return ListTile(
                leading: CircleAvatar(
                  child: Text('${name[0]}'),
                ),
                title: Text('$name'),
              );
            },
            itemCount: _names.length,
          ),
        );
      }
    }
    
    
    

    Adding Pop up for each list item

    
      
    class HomePage extends StatelessWidget {
      final List<String> _names = [
        'Liam', 'Noah', 'Oliver', 'William', 'Elijah', 
        'James', 'Benjamin', 'Lucas', 'Mason', 'Ethan', 'Alexander'
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Pop Menu with List'),
          ),
          body: ListView.builder(
            itemBuilder: (_, i) {
              String name = _names[i];
              return ListTile(
                leading: CircleAvatar(
                  child: Text('${name[0]}'),
                ),
                title: Text('$name'),
                // <Add>
                trailing: PopupMenuButton(
                  itemBuilder: (context) {
                    return [
                      PopupMenuItem(
                        value: 'edit',
                        child: Text('Edit'),
                      ),
                      PopupMenuItem(
                        value: 'delete',
                        child: Text('Delete'),
                      )
                    ];
                  },
                  onSelected: (String value){
                      print('You Click on po up menu item');
                  },
                ),
                // </Add>
              );
            },
            itemCount: _names.length,
          ),
        );
      }
    }
    
    
    

    Action onPop menu item selected

    
      
    void actionPopUpItemSelected(String value, String name) {
        String message;
        if (value == 'edit') {
            message = 'You selected edit for $name';
            // You can navigate the user to edit page.
        } else if (value == 'delete') {
            message = 'You selected delete for $name';
            // You can delete the item.
        } else {
            message = 'Not implemented';
        }
        print(message);
    }
    
    
    

    Full Source Code

    
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatelessWidget {
      final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
      final List<String> _names = [
        'Liam', 'Noah', 'Oliver', 'William', 'Elijah', 
        'James', 'Benjamin', 'Lucas', 'Mason', 'Ethan', 'Alexander'
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          key: _scaffoldkey,
          appBar: AppBar(
            title: Text('Pop Menu with List'),
          ),
          body: ListView.builder(
            itemBuilder: (_, i) {
              String name = _names[i];
              return ListTile(
                title: Text('$name'),
                trailing: PopupMenuButton(
                  icon: Icon(Icons.more_vert),
                  itemBuilder: (context) {
                    return [
                      PopupMenuItem(
                        value: 'edit',
                        child: Text('Edit'),
                      ),
                      PopupMenuItem(
                        value: 'delete',
                        child: Text('Delete'),
                      )
                    ];
                  },
                  onSelected: (String value) => actionPopUpItemSelected(value, name),
                ),
              );
            },
            itemCount: _names.length,
          ),
        );
      }
    
      void actionPopUpItemSelected(String value, String name) {
        _scaffoldkey.currentState.hideCurrentSnackBar();
        String message;
        if (value == 'edit') {
            message = 'You selected edit for $name';
        } else if (value == 'delete') {
            message = 'You selected delete for $name';
        } else {
            message = 'Not implemented';
        }
        final snackBar = SnackBar(content: Text(message));
        _scaffoldkey.currentState.showSnackBar(snackBar);
      }
    }